<template>
	<view class="warpper">
		
		<view class="imagehome">
			<view class="header">
			<!-- #ifdef APP || MP-WEIXIN -->
			<view class="imagesHeader">
				<view class="imagesHeaderText">					
					视频换脸
				</view>			
			</view>			
			<!-- #endif -->	
				<scroll-view scroll-x="true" class="scroll-x" scroll-with-animation="true" show-scrollbar="false">
					<text :class="['tt', choise_cate == item[0] ? 'choseed' : '']"
						v-for="(item, index) in image_video_cate" :key="item[0]" @click="onCateClick(item)"
						enable-flex="true">
						{{ item[1] }}
					</text>
				</scroll-view>
				<view class="imageMenu" @click="openMenu"><image class="imageMenuImg"  src="/static/img/imageMenu.png"></image></view>
			</view>
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
				<view class="scroll-y">
					<image :src="item.thumbnail" class="s-image" lazy-load="true" webp="true" mode="aspectFill"
						v-for="(item, index) in video_muban_list" :key="index" @click="onImgClick(item)"
						enable-flex="true"></image>
				</view>
				
			</mescroll-body>
		</view>
		<uni-popup ref="popup" :mask-click="false" @maskClick="closeMenu">
				<view class="opoupBox" @click="closeMenu">
					<text :class="['opoupTab', choise_cate == item[0] ? 'choseed' : '']"
						v-for="(item, index) in image_video_cate" :key="item[0]" @click="onCateClick(item)"
						enable-flex="true">
						{{ item[1] }}
					</text>
				</view>	
			<!-- <button @click="closeMenu">关闭</button> -->
		</uni-popup>
	</view>
</template>

<script>
	import {
		get_video_muban_cate,
		get_video_muban_list
	} from '@/src/api/huanlian.js';
	import {
		jumpto as jump
	} from '@/src/utils/utils.js';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';

	export default {
		mixins: [MescrollMixin], // 使用mixin

		data() {
			return {
				image_video_cate: null,
				choise_cate: null,
				video_muban_list: null,
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				}
			};
		},
		onLoad() {
			this.get_cate();
		},
		onShow: function() {
			this.startListeningToNetworkStatus();
		},
		onHide: function() {
			this.stopListeningToNetworkStatus();
		},
		methods: {
			async get_cate() {
				try {
					let res = await get_video_muban_cate();
					this.image_video_cate = res.data.cates;
					this.choise_cate = this.image_video_cate[0][0];
					this.reloadList();
				} catch (e) {
					console.error(e);
				}
			},
			onCateClick(item) {
				this.choise_cate = item[0];
				this.reloadList();
			},
			onImgClick(item) {
				jump(
					`/src/pages/Ability/VideoRongHe/VideoRongHe?muban_id=${item.i_id}&muban_url=${item.video}&poster=${item.thumbnail}&video_name=${item.video_name}&duration=${item.duration}&masterPage=masterPage`
					);
			},
			async upCallback(page) {
				if (!this.choise_cate) return;
				try {
					let res = await get_video_muban_list({
						page_number: page.num,
						cate: this.choise_cate
					});

					let curPageData = res.data.list;
					let curPageLen = curPageData.length;
					if (page.num == 1) this.video_muban_list = []; //如果是第一页需手动置空列表
					this.video_muban_list = this.video_muban_list.concat(curPageData); //追加新数据
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen, res.data.has_next);
					}, 500);
				} catch (e) {
					console.log(e);
					this.mescroll.endErr();
				}
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.scrollTo(0, 0);
				this.mescroll.resetUpScroll();
			},
			startListeningToNetworkStatus() {
				uni.onNetworkStatusChange(this.handleNetworkStatusChange);
			},
			stopListeningToNetworkStatus() {
				uni.offNetworkStatusChange(this.handleNetworkStatusChange);
			},
			async handleNetworkStatusChange(res) {
				if (res.isConnected && !this.choise_cate) {
					// 网络连接正常
					await this.get_cate();
					this.reloadList();
				} else {
				}
			},
			//菜单栏弹出
			openMenu () {
				this.$refs.popup.open('left')
			},
			closeMenu () {
				this.$refs.popup.close()
			}
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: "一键Ai换脸，视频换脸，图片换脸，Ai写真，快来体验吧",
				imageUrl: "https://sm.2sxzw.com/mgmg/jiabin01/mine/fenxiang.jpg",
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: "一键Ai换脸，视频换脸，图片换脸，Ai写真，快来体验吧",
				imageUrl: "https://sm.2sxzw.com/mgmg/jiabin01/mine/fenxiang.jpg",
			}
		},


	};
</script>

<style lang="scss">
	@import 'VideoHome.scss';
</style>